<template>
  <div class="bw-dom-node">
    <div :class="['dom-node', data.isSelect && 'dom-node-select']">
      <div class="node-name" @click="onExpand()">
        <Icon
          v-if="isExpandIcon"
          icon="ant-design:right-outlined"
          :class="['icon dom-node-item', isExpand && 'icon-expand']"
        />

        <span class="title dom-node-item" @click="onSelect(data.nodeId)">
          {{ data?.nodeName }}
        </span>
      </div>

      <div class="node-action">
        <a-tooltip v-if="data.isHide" placement="top" title="显示">
          <Icon
            icon="ant-design:eye-outlined"
            :class="['icon item-icon dom-node-item']"
            @click="onHide(data.nodeId, false)"
          />
        </a-tooltip>

        <a-tooltip v-else placement="top" title="隐藏">
          <Icon
            icon="ant-design:eye-invisible-outlined"
            :class="['icon item-icon dom-node-item']"
            @click="onHide(data.nodeId, true)"
          />
        </a-tooltip>

        <a-tooltip placement="top" title="移除">
          <Icon
            icon="ant-design:delete-outlined"
            :class="['icon item-icon delete-icon dom-node-item']"
            @click="onDelete(data.nodeId)"
          />
        </a-tooltip>
      </div>
    </div>

    <BwDomNodeSlot
      v-if="isExpand"
      :data="data.children"
      @select="onSelect"
      @hide="onHide"
      @delete="onDelete"
    />
  </div>
</template>

<script lang="ts" setup>
import { useDomNode } from './util'
import BwDomNodeSlot from '../domSolt/index.vue'

import type { BwDomNodeInfo } from '../model'
interface BwDomNodeProps {
  data: BwDomNodeInfo
}

const emit = defineEmits(['hide', 'select', 'delete'])
const props = withDefaults(defineProps<BwDomNodeProps>(), {
  data: () => ({}) as BwDomNodeInfo,
})

const {
  isExpand,
  isExpandIcon,

  onHide,
  onExpand,
  onSelect,
  onDelete,
} = useDomNode(props, emit)
</script>

<style lang="less" scoped>
.bw-dom-node {
  width: 100%;
  height: auto;
  position: relative;

  .dom-node {
    display: flex;
    height: 30px;
    cursor: pointer;
    padding-left: 5px;
    border-radius: 4px;
    align-items: center;
    border-radius: 4px;
    margin-bottom: 2px;
    background-color: #fff;
    justify-content: space-between;
    // border: 1px solid #e8e8e8;

    .icon {
      font-size: 13px;
    }

    .node-name {
      flex: 1;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: flex-start;

      .title {
        font-size: 14px;
        overflow: hidden;
        text-indent: 5px;
        white-space: nowrap;
        display: inline-block;
        text-overflow: ellipsis;
      }

      .icon-expand {
        transform: rotate(90deg);
      }
    }

    .node-action {
      flex-shrink: 0;
      padding-right: 8px;

      .item-icon {
        margin-left: 5px;
        display: none !important;
      }
    }

    &:hover {
      background-color: rgba(0, 0, 0, 0.08);

      .item-icon {
        display: inline-block !important;
      }

      .delete-icon {
        color: red;
      }
    }
  }

  .dom-node-select {
    background-color: rgba(0, 0, 0, 0.08);
  }

  .bw-com-dom-slot {
    width: 100%;
    padding-left: 8px;

    .bw-dom-slot-box {
      border: 1px solid rebeccapurple;

      .slot-box-alias {
        width: 134%;
        font-size: 12px;
        color: #fff;
        text-align: center;
        margin-top: -1px;
        background-color: rebeccapurple;
        transform: scale(0.75);
        transorigin: 0 0;
      }
    }
  }
}
</style>
